<template>
   <el-container class="layout-container-demo" style="height: 100vh">
     <el-aside width="auto">
       <el-scrollbar>
         <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group >
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <template #title>Navigator Two</template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><document /></el-icon>
      <template #title>Navigator Three</template>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <template #title>Navigator Four</template>
    </el-menu-item>
  </el-menu>
       </el-scrollbar>
     </el-aside>
 
     <el-container>
       <el-header style="font-size: 12px;display: flex;">
         <div style="">
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
               <el-radio-button :value="false">expand</el-radio-button>
               <el-radio-button :value="true">collapse</el-radio-button>
            </el-radio-group>
         </div>
         <div style="flex: 1%;">
            <el-breadcrumb separator="/">
               <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
               <el-breadcrumb-item>系统</el-breadcrumb-item>
               <el-breadcrumb-item>用户管理</el-breadcrumb-item>
               <el-breadcrumb-item>用户添加</el-breadcrumb-item>

            </el-breadcrumb>
         </div>
         <div class="toolbar">
            
           <el-dropdown>
             <el-icon style="margin-right: 8px; margin-top: 1px">
               <setting />
             </el-icon>
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item>View</el-dropdown-item>
                 <el-dropdown-item>Add</el-dropdown-item>
                 <el-dropdown-item>Delete</el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
           <span>Tom</span>
         </div>
       </el-header>
 
       <el-main>
         <el-scrollbar>
           <el-table :data="tableData">
             <el-table-column prop="date" label="Date" width="140" />
             <el-table-column prop="name" label="Name" width="120" />
             <el-table-column prop="address" label="Address" />
           </el-table>
         </el-scrollbar>
       </el-main>
     </el-container>
   </el-container>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
 
 const item = {
   date: '2016-05-02',
   name: 'Tom',
   address: 'No. 189, Grove St, Los Angeles',
 }
 const tableData = ref(Array.from({ length: 50 }).fill(item))


 
const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

 </script>
 
 <style scoped>
 .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

 .layout-container-demo .el-header {
   position: relative;
   background-color: var(--el-color-primary-light-7);
   color: var(--el-text-color-primary);
 }
 .layout-container-demo .el-aside {
   color: var(--el-text-color-primary);
   background: var(--el-color-primary-light-8);
 }
 .layout-container-demo .el-menu {
   border-right: none;
 }
 .layout-container-demo .el-main {
   padding: 0;
   height: 100%;
 }
 .layout-container-demo .toolbar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   right: 20px;
 }
 </style>
 